<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>datagrid数据表格</title>
<!-- 引入jQuery.js文件 -->
<script type="text/javascript" src="static/bootstrap/jquery.js"></script>
<link rel="stylesheet"href="static/jquery-easyui-1.4.1/themes/default/easyui.css">
<!-- 引入easyui小图标文件  -->
<link rel="stylesheet" href="static/jquery-easyui-1.4.1/themes/icon.css">
<script type="text/javascript"src="static/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="static/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function(){
		
		$.extend($.fn.validatebox.defaults.rules, {
			midLength: {    //验证方法，json对象
				validator: function(value, param){    //value文本框中的值, param传递参数的数组
					return value.length >= param[0] && value.length <= param[1];
				},
				message: '用户名必须在2到5个字符之间！'   //不符合条件提示
			} 
		});
		
		//数值验证组件
	 	 $('#age').numberbox({    
		    min:0, //最小值
		    max:150, //最大值
		    required:true, //必填
		    missingMessage:'年龄必填！' //提示文字
		});
		
		//日期组件
		$('#birthdate').datebox({
			required:true,
			missingMessage:'生日必填',
			editable:false
		});
		
		//日期时间组件
		$('#time').datetimebox({
			required:true,
			missingMessage:'时间必填',
			editable:false
		});
		
		var flag; //undefined 判断新增和修改方法
		
		//datagrid数据表格
		$('#t_student').datagrid({
			idField:'id', //只要创建数据表格必须要加idField
			striped:true, //隔行变色
			url:'findall', //异步加载数据路径
			//title:'数据表格', //表头
			width:'100%', //宽度
			fitColumns: true, //自动宽度
			height:'auto', //高度自适应
			loadMsg: '数据正在加载...请耐心等待....', //在从远程站点加载数据的时候显示提示消息
			rownumbers: true, //在表格前面显示行号
			nowrap:true, //折行显示
			//singleSelect:true, //只允许选中一行
			remoteSort:false, //取消本地排序
			
			frozenColumns:[ //冻结列，不能与fitColums一起使用
				[
					{
						field:'ck',
						width:50,
						checkbox:true //复选框 与singleSelect冲突
					}
				]
			],
			columns:[
				[	
					{
						field:'stuNum',
						title:'学号',
						width:120,
						align:'center',
						sortable:true //允许列使用排序
					},{
						field:'name',
						title:'姓名',
						width:120,
						align:'center',
						sortable:true
					},{
						field:'sex',
						title:'性别'
						,width:120,
						align:'center',
						sortable:true,
					},{
						field:'age',
						title:'年龄',
						width:120,
						align:'center',
						sortable:true
					},{
						field:'birthdate',
						title:'出生日期',
						width:120,
						align:'center',
						sortable:true
					},{
						field:'time',
						title:'开始时间',
						width:120,
						align:'center',
						sortable:true
					}
				]
			],
			pagination:true, //设置分页
			pageSize:10, //设置开始显示几条数据
			pageList:[10,20,25,50 ], //设置分页条数
			toolbar:[
				{
					text:'新增学生',
					iconCls:'icon-add', //小图标
					handler:function(){
						flag="add";
						$('#myform').get(0).reset(); //清空表单数据
						$('#mydialog').dialog({ //动态生成表头
							title:'新增学生',
						 });
						$('#mydialog').dialog('open');
					}
				},{
					text:'修改信息',
					iconCls:'icon-edit', 
					handler:function(){
						flag="edit";
						var arr =  $('#t_student').datagrid('getSelections'); //返回选中记录
						//判断是否选择一条记录或多条或未选
						if(arr.length == 0){
							 $.messager.show({
									title:'提示信息!',
									msg:'您还未选择要修改的数据！每次只能修改一条数据哟！',
									height:180,
									width:220
								 });
						 }else if(arr.length != 1){ 
							 $.messager.show({
								title:'提示信息!',
								msg:'每次只能选择一条数据进行修改！',
								height:180,
								width:220
							 });
						 }else{
							 $('#mydialog').dialog({ //动态生成表头
								title:'修改信息',
							 });
							 $('#mydialog').dialog('open'); //打开窗口
							 $('#myform').get(0).reset(); //清空表单数据
							 //重写数据
							 $('#myform').form('load',{
								 id:arr[0].id,
								 stuNum:arr[0].stuNum,
								 name:arr[0].name,
								 sex:arr[0].sex,
								 age:arr[0].age,
								 birthdate:arr[0].birthdate,
								 time:arr[0].time
							 });
							 
						 }
					}
				},{
					text:'删除学生',
					iconCls:'icon-remove',
					handler:function(){
					var arr = $('#t_student').datagrid('getSelections');
					if(arr.length <= 0){
						$.messager.show({
							title:'提示信息!',
							msg:'至少选择一条数据进行删除',
							height:180,
							width:220
						});
					}else{
						$.messager.confirm('提示信息','确认删除？',function(r){
							if(r){
								 //批量删除
								var ids = '';
								for(var i = 0;i < arr.length;i++){
									ids += arr[i].id+',';
								}
								ids = ids.substring(0 , ids.length - 1);
								$.post('delete',{ids:ids},function(result){
									//1.刷新数据表格
									$('#t_student').datagrid('reload');
									//2.清空idField
									$('#t_student').datagrid('unselectAll');
									//3.提示信息
									$.messager.show({
										title:'提示信息!',
										msg:'操作成功！',
										height:180,
										width:220
									});
									
								});	
							}else{
								return;
							}
						});
						}
					}
				},{
					text:'查询学生',
					iconCls:'icon-search',
					handler:function(){
						$('#lay').layout('expand','north');
					}
				}
			]
		});
		
		//提交表单方法
		$('#btn1').click(function(){
			if($('#myform').form('validate')){
				$.ajax({
					type:'post', //提交方式
					url:flag=='add'?'save':'edit', //请求地址
					cache:false, //清除缓存
					data:$('#myform').serialize(), //序列化表单
					//dataType:'json', //返回数据格式
					success:function(result){
						//1.关闭窗口
						$('#mydialog').dialog('close');
						//2.刷新datagrid 保持在当前页
						$('#t_student').datagrid('reload');
						//3.提示信息
						$.messager.show({
							title:'提示信息!',
							msg:'操作成功！'
						});
					}
				});
			}else{
				$.messager.show({
					title:'提示信息!',
					msg:'数据验证不通过，不能保存！'
				})
			}	
		});
		
		//关闭窗口
		$('#btn2').click(function(){
			$('#mydialog').dialog('close');
		});
		//查询
		$('#searchbtn').click(function(){
			$('#t_student').datagrid('load',serializeForm($('#mysearch')));
		});
		//清空查询
		$('#clearbtn').click(function(){
			$('#mysearch').form('clear'); //清空表单数据
			$('#t_student').datagrid('load',{}); //重新刷新表格
		});
		
	});	
	
	//js方法：序列化表单
	function serializeForm(form){
		var obj = {};
		$.each(form.serializeArray(),function(index){
			if(obj[this['name']]){
				obj[this['name']] = obj[this['name']] + ','+this['value'];
			}else{
				obj[this['name']] = this['value'];
			}
		});
		return obj;
	}
</script>
</head>
<body> 
	<div id="lay" class="easyui-layout" fit=true style="width: 100%;height: 100%;">
		<div region="north" title="用户查询" style="height:80px;" collapsed=true>
			<form id="mysearch" method="post">
				 <div class="input_container" style="margin-top: 15px;">
					&emsp;
				 	<input class="easyui-textbox" label="姓名：" labelPosition="top" data-options="prompt:'请输入姓名',iconCls:'icon-man'" style="width:200px;height:26px;" name="name">
				 	&emsp;
				 	<input class="easyui-textbox" label="学号：" labelPosition="top" data-options="prompt:'请输入学号',iconCls:'icon-sum'" style="width:200px;height:26px;" name="stuNum">
				 	&nbsp;
				 	<a id="searchbtn" class="easyui-linkbutton">查询</a>
				 	&nbsp;
					<a id="clearbtn" class="easyui-linkbutton">清空</a>
				 </div>
			</form>
		</div>
		<div region="center">
			<table id="t_student"></table>
		</div>
	</div>
	
	<div id="mydialog" class="easyui-dialog" style="width:250px;" closed=true modal=true draggable=false title="新增学生">
		<form id ="myform" action="" method="post">
			<input type="hidden" name="id" value=""/>
			<table>
				<tr>
					<td>
						<label for="stuNum">学号</label>
					</td>
					<td>
						<input type="text" class="easyui-validatebox" name="stuNum" id="stuNum" required=true validType="midLength[2,5]" missingMessage="学号必填！">
					</td>
				</tr>
				<tr>
					<td>
						<label for="name">姓名</label>
					</td>
					<td>
						<input type="text"name="name" id="name" class="easyui-validatebox" required=true missingMessage="姓名必填！">
					</td>
				</tr>
				<tr>						
					<td>
						<label for="sex">性别</label>
					</td>
					<td>
						<input type="radio"name="sex" checked="checked" id="sex1" value="男">男
						<input type="radio" name="sex" id="sex2" value="女">女
					</td>
				</tr>
				<tr>
					<td>
						<label for="age">年龄</label>
					</td>
					<td>
						<input type="text" name="age" id="age">
					</td>					
				</tr>
				<tr>
					<td>
						<label for="birthdate">出生日期</label>
					</td>
					<td>
						<input type="text" name="birthdate" id="birthdate">
					</td>
				</tr>
				<tr>
					<td>
						<label for="time">开始时间</label>
					</td>
					<td>
						<input type="text" name="time" id="time">
					</td>
				</tr>
				
				<tr style="text-align: center;">
					<td colspan="2">
						<a class="easyui-linkbutton" id="btn1">确定</a>
						<a class="easyui-linkbutton" id="btn2">关闭</a>
					</td>
				</tr>
			</table>			
		</form>
	</div>
</body>
</html>